import React from 'react';
import _ from 'lodash';

// 导入我们定义的网络请求库
import { http } from '../utils/http';

// 组件
import { CommentCount } from './components/CommentCount';
import { Tabs } from './components/Tabs';
import { Form } from './components/Form';
import { CommentList } from './components/CommentList';

import './App.css'; // 导入样式

// 定义组件-类组件（维护页面状态）
export class App extends React.Component {
  constructor() {
    console.log('1 constructor');
    // 初始化 this
    super();
    // 从本地读取数据
    // const list = JSON.parse(localStorage.getItem('list') || '[]');

    // 每一个组件实例的数据
    this.state = {
      txt: 'xxx', // 用户输入的评论
      // hot: 热度排序  time: 时间排序
      tabs: [],
      // tabs: [
      //   {
      //     id: 1,
      //     name: '热度',
      //     type: 'hot',
      //   },
      //   {
      //     id: 2,
      //     name: '时间',
      //     type: 'time',
      //   },
      // ],
      active: 'hot',
      list: [],
      // list: [
      //   {
      //     id: 1,
      //     author: '刘德华',
      //     comment: '给我一杯忘情水',
      //     time: new Date('2021-10-10 09:09:00'),
      //     // 1: 点赞 0：无态度 -1:踩
      //     attitude: 1,
      //   },
      //   {
      //     id: 2,
      //     author: '周杰伦',
      //     comment: '哎哟，不错哦',
      //     time: new Date('2021-10-11 09:09:00'),
      //     // 1: 点赞 0：无态度 -1:踩
      //     attitude: 0,
      //   },
      //   {
      //     id: 3,
      //     author: '五月天',
      //     comment: '不打扰，是我的温柔',
      //     time: new Date('2021-10-11 10:09:00'),
      //     // 1: 点赞 0：无态度 -1:踩
      //     attitude: -1,
      //   },
      // ],
    };
    // 定义 Ref 变量
    this.txtRef = React.createRef();
  }

  // 发表评论,传递给子组件 <Form/> 去调用
  handleAddComment = async (txt) => {
    console.log(txt);
    // 组装评论对象
    // const comment = {
    //   // id: Math.random(),
    //   id: Date.now(),
    //   author: '王心凌',
    //   comment: txt,
    //   time: new Date(),
    //   attitude: 0,
    // };
    // // 追加到评论列表
    // this.setState({
    //   list: [comment, ...this.state.list], // 追加评论
    // });

    // 组装评论对象
    const comment = {
      author: '王心凌',
      comment: txt,
      time: new Date(),
      attitude: 0,
    };

    // 把评论数据保存到服务器
    const res = await http.post('/list', comment);
    console.log('res', res);
    // 1 处理方式，好的用户体验，先把评论set到list
    this.setState({
      list: [res.data, ...this.state.list], // 追加评论
    });
    // 2 直接从新发起请求
    // 省略和componentDidMount里获取list的数据一样
  };

  // 删除评论事件处理函数
  delComment = async (e, id) => {
    console.log(e, id);
    // 使用过滤-filter，生成一个新的数组
    // const filtered = this.state.list.filter((item) => item.id !== id);
    // // 设置页面数据
    // this.setState({
    //   list: filtered,
    // });

    // 发起请求，删除服务器端数据
    const res = await http.delete(`/list/${id}`);
    console.log('delete res', res);
    // 1 判断一下是否删除成功,处理本地，用户体验好
    // if (res.status === 200) {
    //   // 删除本地数据
    //   const filtered = this.state.list.filter((item) => item.id !== id);
    //   // 设置页面数据
    //   this.setState({
    //     list: filtered,
    //   });
    // }

    // 2 删除完毕后，重发起请求。
    if (res.status === 200) {
      const list = await http.get('/list');
      // 设置页面数据
      this.setState({
        list: list.data,
      });
    }
  };

  // 点赞或踩的事件处理函数
  changeAttitude = async (id, attitude) => {
    console.log(id, attitude);
    // const newList = this.state.list.map((item) => {
    //   if (item.id === id) {
    //     // return {
    //     //   id: item.id,
    //     //   author: item.author,
    //     //   comment: item.comment,
    //     //   time: item.time,
    //     //   attitude: attitude,
    //     // };
    //     return { ...item, attitude };
    //   } else {
    //     return item;
    //   }
    // });
    // // 设置页面数据
    // this.setState({
    //   list: newList,
    // });
    // 发起请求，请注意这里是修改数据发起patch请求
    const res = await http.patch(`/list/${id}`, { attitude });
    console.log('patch', res);
    // 判读一下res
    if (res.status === 200) {
      // 1 没有问题，直接处理本地信息
      const newList = this.state.list.map((item) => {
        if (item.id === id) {
          // return {
          //   id: item.id,
          //   author: item.author,
          //   comment: item.comment,
          //   time: item.time,
          //   attitude: attitude,
          // };
          return { ...item, attitude };
        } else {
          return item;
        }
      });
      // 设置页面数据
      this.setState({
        list: newList,
      });
    }

    // 2 直接再重新发起请求。这里也省略了。
  };

  // 排序
  changeSortType = (type) => {
    console.log(type);
    // 热度按照id的降序排列
    if (type === 'hot') {
      // const newList = this.state.list.sort((a, b) => {
      //   // b - a 是降序
      //   return b.id - a.id;
      // });
      // 使用lodash第三方库
      const newList = _.orderBy(this.state.list, ['id'], ['desc']);
      // 设置页面数据
      this.setState({
        list: newList,
        active: type,
      });
    } else {
      // 按照时间的升序
      const newList = this.state.list.sort((a, b) => {
        return a.time.getTime() - b.time.getTime();
      });
      // 设置页面数据
      this.setState({
        list: newList,
        active: type,
      });
    }
  };

  // 页面结构
  render() {
    console.log('2 render');
    return (
      <div className="comment-root">
        <div className="comment-container">
          {/* 评论数 */}
          <CommentCount number={this.state.list.length} />

          {/* 排序tab */}
          <Tabs
            tabs={this.state.tabs}
            active={this.state.active}
            changeSortType={this.changeSortType}
          />

          {/* 发表评论区 */}
          <Form handleAddComment={this.handleAddComment} />

          {/* 评论列表区 */}
          <CommentList
            list={this.state.list}
            changeAttitude={this.changeAttitude}
            delComment={this.delComment}
          />
        </div>
      </div>
    );
  }

  // 创建完毕，走 didmount
  async componentDidMount() {
    console.log('3 componentDidMount');
    // 读取本地数据
    // const list = JSON.parse(localStorage.getItem('list') || '[]');
    // this.setState({
    //   list: list,
    // });
    // 从服务器获取数据
    // 发起请求
    const tabs = await http.get('/tabs');
    const list = await http.get('/list');
    console.log('tabs', tabs.data);
    // 设置页面数据
    this.setState({
      tabs: tabs.data,
      list: list.data,
    });
  }

  // 更新阶段，
  componentDidUpdate() {
    console.log('4 componentDidUpdate');
    // 每当有数据发生变化的时，存数据
    // 发送到服务器
    // 保存到本地
    localStorage.setItem('list', JSON.stringify(this.state.list));
  }
}
